<!--
 * @Descripttion: 详情弹框(查看、编辑、删除)
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-19 15:47:59
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-07-22 10:17:43
-->
<template>
  <KiFormDialog
    :show.sync="row__.show"
    :loading="row__.loading"
    :title="row__.status | dialogTitle__"
    v-model="row__.data"
    :readonly="row__.status === 'r'"
    ref="formRef"
    class="form-dialog"
    :destroy-on-close="true"
    @close="onClose"
  >
    <!-- <div>{{ row__.status  }}</div> -->
    <el-steps :active="stepIndex" finish-status="success" align-center>
      <el-step
        :title="item"
        v-for="(item, index) in stepTitles"
        :key="index"
        @click.native="onStepTap(index)"
      >
      </el-step>
    </el-steps>

    <!-- 基本信息 -->
    <form0
      :form="row__.data"
      :hotelList="options.hotelList"
      ref="form_0"
      :status="row__.status"
      v-show="stepIndex == 0"
    >
    </form0>
    <!-- 卧室信息 -->
    <form1
      :form="row__.data"
      ref="form_1"
      :status="row__.status"
      v-show="stepIndex == 1"
    >
    </form1>
    <!-- 图片信息 -->
    <form2
      :form="row__.data"
      ref="form_2"
      :status="row__.status"
      v-show="stepIndex == 2"
    >
    </form2>
    <!-- 设施设备 -->
    <form3
      :form="row__.data"
      ref="form_3"
      :status="row__.status"
      :parentShow="row__.show"
      v-show="stepIndex == 3"
      @change="onForm3Change"
    >
    </form3>
    <!-- 政策规则 -->
    
    <form4
      :form="row__.data"
      ref="form_4"
      :status="row__.status"
      v-show="stepIndex == 4"
    >
    </form4>

    <div slot="footer" class="dialog-footer">
      <div class="flex-item">
        <el-button @click="onStepChange('prev')" v-if="stepIndex > 0">
          上一步
        </el-button>
      </div>
      <div class="flex-item">
        <el-button
          type="primary"
          @click="onStepChange('next')"
          v-if="stepIndex < 4"
        >
          下一步
        </el-button>
        <el-button
          type="warning"
          @click="onSubmit"
          v-if="row__.status !== 'r' && stepIndex === 4"
          :loading="submitting"
        >
          确 定
        </el-button>
      </div>
    </div>
  </KiFormDialog>
</template>

<script>
import form0 from "./form0";
import form1 from "./form1";
import form2 from "./form2";
import form3 from "./form3";
import form4 from "./form4";
export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
          show: false,
          data: null,
          loading: false,
        };
      },
    },
    submitForm: {
      type: Function,
      required: true,
    },
  },
  components: {
    form0,
    form1,
    form2,
    form3,
    form4,
  },
  watch: {
    "form.show": {
      handler(nv, ov) {
        if (nv && !ov) {
          this.queryHotel();
        }
      },
      immediate: true,
      deep: true,
    },
    "form.data.innerImages": {
      handler(nv, ov) {
        if (nv && !ov) {
          this.formatImagesLine(nv, "innerImages");
        }
      },
      immediate: true,
      deep: true,
    },
    "form.data.facilityImages": {
      handler(nv, ov) {
        if (nv && !ov) {
          this.formatImagesLine(nv, "facilityImages");
        }
      },
      immediate: true,
      deep: true,
    },
    "form.data.otherImages": {
      handler(nv, ov) {
        if (nv && !ov) {
          this.formatImagesLine(nv, "otherImages");
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      row__: this.form,
      // 步骤条索引值
      stepIndex: 0,
      // 模块验证状态
      stepVerify: {
        0: false,
        1: false,
        2: false,
        3: false,
        4: false,
      },
      // 步骤条名称
      stepTitles: ["基本信息", "卧室信息", "图片管理", "设施设备", "政策规则"],
      options: {
        hotelList: [],
      },
      // 设施设备数据
      facilitiesData: null,
      submitting: false,
    };
  },
  methods: {
    formatImagesLine(target, name) {
      let temp = [];
      if (target && target.constructor === Array && target.length > 0) {
        target.forEach((its) => {
          temp.push(its.imageUrl);
        });
      }
      this.$set(this.row__.data, "_" + name, temp);
    },
    /**
     * 验证弹框中的第index个表单
     * @param {Number} index
     * @return Void
     */
    validateForm(index) {
      return new Promise((resolve, reject) => {
        this.$refs[`form_${index}`].$refs[`form${index}`].validate((valid) => {
          if (valid) {
            resolve(true);
          } else {
            reject();
          }
        });
      });
    },
    /**
     * 验证弹框中的所有表单
     * @return Void
     */
    validateAllForm() {
      for (let i = 0; i <= 4; i++) {
        let idx = String(i);
        this.$refs[`form_${idx}`].$refs[`form${idx}`].validate((valid) => {
          this.stepVerify[`${idx}`] = valid ? true : false;
        });
      }
    },
    /**
     * 弹框关闭事件
     * @return Void
     */
    onClose() {
      let sourceData = { ...this.$options.data(), row__: this.form };
      Object.assign(this.$data, sourceData);
    },
    /**
     * 步骤条点击事件
     * @param {Number} index
     * @return Void
     */
    onStepTap(index) {
      this.stepIndex = index;
    },
    /**
     * "上一步/下一步"点击事件
     * @param {Number} index
     * @return Void
     */
    onStepChange(status) {
      if (status == "prev") {
        this.stepIndex--;
      } else {
        if (this.row__.status === "r") {
          this.stepIndex++;
        } else {
          this.validateForm(this.stepIndex)
            .then((res) => {
              if (res) {
                this.stepIndex++;
              }
            })
            .finally(() => {});
        }
      }
    },
    /**
     * "确定"按钮点击事件
     * @param {Number} index
     * @return Void
     */
    onSubmit() {
      this.validateAllForm();
      let valid =
        this.stepVerify["0"] &&
        this.stepVerify["1"] &&
        this.stepVerify["2"] &&
        this.stepVerify["3"] &&
        this.stepVerify["4"];
      if (valid) {
        if (this.submitting) {
          return false;
        }
        this.submitting = true;
        this.autoClear();
        this.formatFacilities();
        this.submitForm()
          .then( _ => {
            this.row__.show = false;
            this.$emit("refresh");
          })
          .finally((_) => {
            this.submitting = false;
          });
      } else {
        this.$swal.error("验证失败,请检查所填写项");
      }
    },
    /**
     * 清除图片上传的一些数据
     * @return Void
     */
    autoClear() {
      const formData = this.row__.data;
      if (formData && formData._innerImages) {
        delete this.row__.data._innerImages;
      }
      if (formData && formData._facilityImages) {
        delete this.row__.data._facilityImages;
      }
      if (formData && formData._otherImages) {
        delete this.row__.data._otherImages;
      }
    },
    // /**
    //  * 新增房型
    //  * @return Void
    //  */
    // addRoomType() {
    //   this.autoClear();
    //   this.formatFacilities();
    //   this.$POST("sot-admin-api/hotel/self/roomTypeInfo/create", this.row__.data)
    //     .then(({ data }) => {
    //       this.$swal.success("新增成功");
    //     })
    //     .finally((e) => {
    //       this.row__.show = false;
    //       this.submitting=false
    //       this.$emit("refresh");
    //     });
    // },
    // /**
    //  * 修改房型
    //  * @return Void
    //  */
    // updateRoomType() {
    //   this.autoClear();
    //   this.formatFacilities();
    //   this.$POST("sot-admin-api/hotel/self/roomTypeInfo/update", this.row__.data)
    //     .then(({ data }) => {
    //       this.$swal.success("修改成功");
    //     })
    //     .finally((e) => {
    //       this.row__.show = false;
    //       this.submitting=false
    //       this.$emit("refresh");
    //     });
    // },
    /**
     * 查询酒店
     * @return void
     */
    queryHotel() {
      this.$POST("sot-admin-api/hotel/self-employed/queryForList", {
        areaCode: null, // 区(标准编码)
        merchantId: null,
        // status : 1, // 1正常,0为禁用 (不需要管是否禁用)
        reviewStatus: 3, // 审核通过
      })
        .then(({ data }) => {
          if (data && data.length > 0) {
            this.$set(this.options, "hotelList", data);
          } else {
            this.$set(this.options, "hotelList", []);
          }
        })
        .finally((e) => {});
    },
    /**
     * 格式化设备设施数据
     * @return void
     */
    formatFacilities() {
      const temp = this.row__.data._facilities;
      let arr = [];
      if (temp && temp.constructor === Array && temp.length > 0) {
        temp.forEach((its) => {
          const tt = its.split("__");
          arr.push({
            code: tt[0],
            value: 1,
          });
        });
      }
      this.row__.data.facilities = arr;
    },
    /**
     * 重新赋值设施设备
     * @return void
     */
    onForm3Change(nv) {
      this.$set(this.row__.data, nv.name, nv.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.form-dialog {
  .el-steps {
    margin-bottom: 28px;
    width: 100%;
  }
  .dialog-footer {
    text-align: right;
    margin-top: 28px;
    display: flex;
    flex-direction: row;
    padding-right:36px;
    .flex-item {
      &:last-child {
        flex: 1;
        margin-left:18px;
      }
    }
  }
}
</style>
